<template>
  <header class="header">
    <div class="header-container-phone">
      <span
        ><svg
          t="1609856929342"
          class="icon-flex"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5206"
          width="16"
          height="16"
        >
          <path
            d="M735.008 1018.176c-110.016 0-253.056-91.424-445.376-283.776C75.552 520.32-13.536 367.328 9.344 252.96c24.928-124.704 166.016-220 172-224a32 32 0 0 1 40.384 4L448 259.232a31.968 31.968 0 0 1 0 45.248l-101.664 101.664c8.032 16.032 34.944 57.888 124.288 147.232s131.2 116.256 147.264 124.288L719.52 576a32.96 32.96 0 0 1 45.248 0l226.272 226.272a32 32 0 0 1 4 40.384c-4 6.016-99.328 147.072-224 172-11.616 2.336-23.616 3.52-36.032 3.52zM196 97.696c-36.448 28.8-109.184 94.208-123.904 167.808-17.792 88.96 70.624 231.488 262.784 423.648 192.16 192.16 334.592 280.544 423.648 262.784 73.568-14.72 139.008-87.456 167.776-123.904l-184.128-184.128-90.496 90.528c-23.424 23.456-67.072 23.424-226.272-135.776-67.808-67.776-112.416-120.608-132.64-156.992-17.184-30.88-18.208-54.208-3.136-69.28l90.528-90.528-184.16-184.16zM958.848 512.064a32 32 0 0 1-31.872-29.76c-14.464-205.12-180.064-370.784-385.216-385.248a32 32 0 1 1 4.512-63.84c236.768 16.704 427.84 207.872 444.512 444.608A32 32 0 0 1 961.12 512l-2.272 0.064z"
            p-id="5207"
          ></path>
          <path
            d="M765.984 511.744a32 32 0 0 1-31.712-28 223.52 223.52 0 0 0-194.208-194.016 31.968 31.968 0 1 1 7.936-63.488 287.456 287.456 0 0 1 249.792 249.504 32 32 0 0 1-31.808 36zM187.84 388.672c-11.552 0-22.72-6.272-28.448-17.248-25.76-49.6-27.584-78.144-24.576-93.344 3.968-19.744 15.712-41.92 34.976-65.888a32 32 0 0 1 49.888 40.096c-17.312 21.536-21.216 33.92-22.08 38.272 0.128 0-0.032 15.52 18.592 51.392a32.064 32.064 0 0 1-28.352 46.72z"
            p-id="5208"
          ></path></svg
        >400-011-8789</span
      >
    </div>
    <div class="header-container">
      <div class="header-container-left">
        <router-link to="/" class="navbar-brand">
          <img :src="`/img/tubiaoa.png`" class="navbar-brand-img" alt="logo" />
          <span class="navbar-brand-span">中龄健康管理（北京）有限公司</span>
        </router-link>
      </div>
      <div class="header-container-right">
        <ul :class="{ collapse: true }">
          <template v-for="(item, index) in menuData">
            <router-link
              :key="index"
              :to="item.to"
              :class="{ active: defaultPath === item.to, connect: index === 5 }"
              >{{ item.title }}</router-link
            >
          </template>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
import menuData from "./menu";
export default {
  data() {
    return {
      defaultPath: "/",
      menuData,
    };
  },
  created() {
    this.$data.defaultPath = this.$route.path; //初始化
  },
  watch: {
    $route: function () {
      this.$data.defaultPath = this.$route.path;
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  height: 130px;
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 5px #cccccc;
  display: flex;
  flex-direction: column;
}
.header-container {
  width: 1200px;
  overflow: hidden;
}
.header-container-left {
  float: left;
}
.navbar-brand {
  display: flex;
  height: 80px;
  line-height: 80px;
  align-items: center;
}
.navbar-brand-img {
  height: 52px;
  margin-right: 13px;
}
.navbar-brand-span {
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  line-height: 25px;
}
.header-container-right {
  float: right;
}
.collapse {
  display: flex;
  flex-basis: auto;
  margin-left: auto;
  align-items: center;
  a {
    color: rgba(16, 16, 16, 100);
    display: block;
    margin-left: 73px;
    font-size: 18px;
    font-weight: 400;
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    &.active {
      font-weight: 600;
      color: #8989fe;
      border-bottom: 4px solid #8989fe;
    }
    &:hover {
      font-weight: 600;
      color: #8989fe;
    }
  }
}
.header-container-phone {
  height: 50px;
  background: #f2f2f2;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 50px;
  width: 100%;
  span {
    display: inline-block;
    text-align: right;
    width: 1200px;
  }
}
.icon-flex {
  position: relative;
  top: 4px;
  margin-right: 10px;
}
</style>
